<template>
  <Card>
    <p slot="title">执勤实力分布</p>
    <div class="chart" id="chart-function-distribute"></div>
    <Divider />
    <span class="text">当前执勤人数：{{count}}人</span>
    <Spin v-show="loading" fix size="large"></Spin>
  </Card>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      count: 0,
      option: null,
      loading:false,
      teamNames: [
        "特勤大队",
        "观山湖大队",
        "南明大队",
        "白云大队",
        "云岩大队",
        "开阳大队",
        "经开大队",
        "清镇大队",
        "修文大队",
        "息烽大队",
        "乌当大队",
        "花溪大队"
      ]
    };
  },
  mounted() {
    this.renderChart();
  },
  methods: {
    renderChart() {
      this.option = {
        tooltip: {
          formatter: function(params) {
            var results = "";
            for (var i = 0; i < labels.length; i++) {
              results += labels[i] + ":" + params.value[i] + "%<br>";
            }
            return results;
          }
        },
        radar: {
          name: {
            textStyle: {
              color: "#000"
            }
          },
          indicator: this.teamNames.map(o=>{
              return {
                  name:o,
                  max:10
              }
          })
        },
        series: [
          {
            type: "radar",
            data: [
              {
                value: this.teamNames.map(o=>{
                    return 0;
                })
              }
            ]
          }
        ]
      };
      this.$Crender('chart-function-distribute',this.option)
    }
  }
};
</script>

<style scoped>
.chart{
    height:350px;
}
</style>